<template>
  <div class="admin-container">
    <!-- <div class="container-1200"> -->
      <div style="margin-bottom: 10px;display: flex;align-items: center" v-show="queryType">
        <el-form
        :model="query"
        :rules="query"
        ref="query"
        :inline="true"
        class="demo-form-inline"
      >
        <el-form-item label="公司名称">
          <el-select v-model="query.companyId" placeholder="请选择公司" @change="companyChange" clearable>
            <el-option
              :label="item.name"
              :value="item.id"
              v-for="item in companyList"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="项目名称">
        <el-select v-model="query.projectId" placeholder="请选择项目" filterable clearable>
            <el-option
              :label="item.projectName"
              :value="item.id"
              v-for="item in projectList"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>  
        <el-form-item>
          <el-button type="primary" @click="submitQuery">查询</el-button>
          <el-button @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      </div>
      <el-table border :data="tableData" style="width: 100%" align="center">
        <el-table-column prop="projectName" label="项目名称" align="center"> </el-table-column>
        <el-table-column prop="createDate" label="上报时间" align="center"> </el-table-column>
        <el-table-column prop="ytz" label="已投资" align="center"> </el-table-column>
        <el-table-column prop="ycs" label="已创收" align="center"> </el-table-column>
        <el-table-column prop="ycjyrs" label="已创就业数量" align="center"> </el-table-column>
        <el-table-column prop="xzrcs" label="新增人才数" align="center"> </el-table-column>
        <el-table-column prop="xzzl" label="新增专利" align="center"> </el-table-column>
        <el-table-column prop="xhdrys" label="单位新获得荣誉" align="center"> </el-table-column>
        <el-table-column prop="zcdxlz" label="政策兑现/融资额" align="center">
        </el-table-column>
        <el-table-column prop="meta" label="上传佐证资料" align="center"> 
           <template scope="scope" >
              <div v-for="(item,index) in scope.row.meta" :key="index">
               <el-link :href="item.url" target="_blank"  type="primary" >({{item.name}})</el-link>
            </div>
          </template>
        </el-table-column>
        <!-- <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="viewProjectExecute(scope.row)"
              >查看月报</el-button
            >
          </template>
        </el-table-column> -->
      </el-table>
      <el-footer class="el-footerBox">
      <el-pagination
  background
  layout="prev, pager, next"
  :total="total" :page-size="pageSize" :current-page.sync="pageNum" @current-change="getprojectExecuteList">
</el-pagination> 
</el-footer>
    <!-- </div> -->
  </div>
</template>

<script>
import permission from '@/directive/permission/index.js' // 权限判断指令
import { validUsername } from "@/utils/validate";
import utils from "@/utils/utils.js";
import { find as companyFind, list as companyList } from "@/api/adminCompany";
import { find as projectFind, list as projectList } from "@/api/adminProject";
import { list as adminProjectExecuteList } from "@/api/adminProjectExecute";

export default {
  directives: { permission },
  components: {},
  name: "project",
  data() {
    return {
      queryType:true,
      query:{
        companyId:"",
        projectId:""
      },
      total:0,
      pageNum:1,
      pageSize:20,
      companyId: "",
      projectId:"",
      tableData: [],
      companyList: [],
      projectList: [],
    };
  },
  watch: {
    $route: {
      handler: function (route) {},
      immediate: true,
    },
  },

  created() {
    
  },

  mounted() {
    let _this = this
    if (this.$route.query) {
      this.companyId = this.$route.query.companyId;
      this.projectId = this.$route.query.projectId;
      _this.getProjectList("")
      _this.getCmpanyList();
    }
    this.getprojectExecuteList();
  },

  destroyed() {},

  methods: {

    //获取项目列表
    getprojectExecuteList() {
      let _this = this
      let params = new URLSearchParams();
      params.append('companyId', _this.query.companyId);
      params.append('projectId', _this.query.projectId);
      params.append('pageNum', _this.pageNum);
      params.append('pageSize', _this.pageSize);
      adminProjectExecuteList(params)
        .then((res) => {
          console.log("projectExecuteList成功获取数据--", res.data.data);
          if (res.type == "success") {
            this.tableData = res.data.data;
            this.total = res.data.total
              if(this.tableData.length > 0){
              this.tableData.map(item => {
              item.createDate = utils.dateFormatter(item.createDate)
              if(!utils.isNull(item.meta)){
                item.meta = JSON.parse(item.meta)
              }
              })
              }
            
            
          }
        })
        .catch((err) => {
          this.$message.error(err.msg);
        });
    },

    

    viewProjectExecute(data){
      this.$router.push({
        path: "/admin/projectExecute/view",
        query: { projectId: this.projectId, companyId: this.companyId, projectExecuteId:data.id },
      });
    },

    companyChange(data){
      console.log('data--',data);
      this.getProjectList(data)
    },

    //条件查询
    submitQuery(){
      this.getprojectExecuteList()
    },

    //条件查询
    resetQuery(){
this.query = {
        companyId:"",
        projectId:""
      }
      this.getProjectList("")
      this.getprojectExecuteList()
    },

    //获取项目信息
    getProjectList(id){
      let params = new URLSearchParams();
      params.append('companyId', id);
      projectList(params).then((res) => {
        console.log("获取项目信息--", res);
        if (res.type == "success") {
          this.projectList = res.data.data;
        }
      });
    },

    //获取公司信息
    getCmpanyList() {
      companyList().then((res) => {
        console.log("获取公司信息res--", res);
        if (res.type == "success") {
          this.companyList = res.data.data;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.el-pagination {
  display:block;
}
.el-col {
  border: solid 1px black;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30px;
  border-collapse: collapse !important;
}

.leftAlign-pd30 {
  justify-content: left;
  padding-left: 30px;
}
.leftAlign-pd40 {
  justify-content: left;
  padding-left: 40px;
}
.leftAlign-pd80 {
  justify-content: left;
  padding-left: 80px;
}
</style>
